const path = require('path');

//启动热更新的第二步
//作用：
//1.使用插件之后不需要手动链接bundle.js文件
//2.使用插件之后自动引用内存中的html页面
const webpack = require('webpack');

//引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');

module.exports = { // entry 入口    output 输出
    entry: path.join(__dirname,'./src/main.js'),//需要打包的文件入口
    output: {
        path:path.join(__dirname,'./dist'),//打包之后输出到文件夹
        filename:'bundle.js'//打包好之后生成的文件名
    },
    devServer:{
        open:true,
        // port:9999,
        contentBase:'src',
        hot:true    //热更新 只需要更新用户更改的内容   启动热更新的第一步
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),    //启动热更新的第三步    new 热更新的模块
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//需要创建的html模板命令
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},  //use中加载器执行的顺序 右往左  先执行css-loader 再执行style-loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //limit 限制 限定 -- 用于指定图片的大小     [name]表示获取背景图片的名称       [ext]获取背景图片的后缀名    [hash:8]表示设置5为哈希编码
            {test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=205178&name=[hash:8]-[name].[ext]'},
            {test:/\.(eot|otf|fon|font|ttf|ttc|woff)$/,use:'url-loader'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//exclude:/node_modules/表示排除node_modules文件夹中的js文件
            {test:/\.vue$/,use:"vue-loader"}
        ]
    },
    resolve:{
        alias:{// 修改vue导入的文件
            // "vue$":"vue/dist/vue.js"
        }
    }
}

//html-webpack-plugin